import { Button, Upload, message } from "antd";
import { useRef, useState } from "react";
import { PlusOutlined, CloudDownloadOutlined } from "@ant-design/icons";
import "./index.less";
import TypeTree from "@/pages/components/type-tree/index.jsx";
import BranchList from "./components/branch-list.jsx";
import { ContainerLayout, CommonTitle } from "@/components";
import { Space } from "antd";

export const Branch = () => {
  const typeTreeRef = useRef();

  const [currentType, setCurrentType] = useState({});

  const onSelect = (type) => {
    setCurrentType(type);
  };

  const listRef = useRef();
 
  const stepExtra = (
    <Button
      size="small"
      type="primary"
      onClick={() => {
        listRef.current.addFlowStep();
      }}
    >
      新增
    </Button>
  );

  return (
    <div className="ant-page-header page-header flow-step-page">
      <div className="ant-page-header-content">
        <div className="layout-left top-bottom-layout">
          <div className="flex-row space-between center">
            <CommonTitle>分支分类</CommonTitle>
            <Button
              className="icon-btn"
              size="small"
              title="新增顶级分类"
              icon={<PlusOutlined />}
              onClick={() => typeTreeRef.current.addTopLevel()}
            ></Button>
          </div>
          <ContainerLayout className="flex-1">
            <TypeTree ref={typeTreeRef} typeCode="8" onSelect={onSelect} />
          </ContainerLayout>
        </div>
        <div className="layout-right top-bottom-layout">
          <div className="flex-row space-between center">
            <CommonTitle type="large">
              {currentType && currentType.id
                ? `【${currentType.name || ""}】分支配置`
                : "分支配置"}
            </CommonTitle>
            <Space>
              <Button
                className="icon-btn"
                size="small"
                title="新增分支"
                icon={<PlusOutlined />}
                onClick={() => {
                  listRef.current.addFlowStep();
                }}
              ></Button>
            
              {/* <Upload {...props}>
                <Button
                  className="icon-btn"
                  title="导入"
                  size="small"
                  type="text"
                  icon={<CloudDownloadOutlined />}
                />
              </Upload> */}
            </Space>
          </div>
          <ContainerLayout className="flex-1">
            <BranchList ref={listRef} type={currentType} typeCode="8" />
          </ContainerLayout>
        </div>
      </div>
    </div>
  );
};

Branch.displayName = "Branch";

export default Branch;
